<script setup lang="ts">
  import { PATH_COLLECTIONS } from '@/enums/routerEnum';
  import { router } from '@/utils/router';

  const navigate = (path: PATH_COLLECTIONS, params: Object) => {
    router.navigate(path, params);
  };
</script>
<template>
  <div class="content">
    <div class="type" @click="navigate(PATH_COLLECTIONS.POEMSEARCH, { type: 'tangshi' })">
      <div class="title">唐诗三百首</div>
      <div class="subtitle">tangshisanbaishou</div>
    </div>
    <div class="type">
      <div class="title">宋词</div>
      <div class="subtitle">songci</div>
    </div>
    <div class="type">
      <div class="title">宋诗</div>
      <div class="subtitle">songshi</div>
    </div>
    <div class="type"></div>
    <div class="type"></div>
  </div>
</template>
<style lang="scss">
  .content {
    display: grid;
    grid-template-columns: repeat(2, 50%);

    .type {
      border-left: 2px solid #b8b8b8;
      padding-left: 16px;
      margin: 12px 20px;
      .title {
        font-weight: bold;
      }
      .subtitle {
        font-size: 12px;
        color: darkgray;
        margin-top: 8px;
      }
    }
  }
</style>
